<template>
  <div class="drink" v-show="curPageShow">
    <div class="base_title"><img src="../assets/img/base_title.png" alt=""></div>

    <ul class="drinkDosing">
        <li
            v-for="(item,index) in activeDrink.step"
            :key="index">
            <img :src="item.dosing" alt="">
        </li>
    </ul>
    
    <div class="container">
         <img :src="activeDrink.emptyContain" alt="">
        <img class="stepImg" :src="activeDrink.complete.img" alt="">
    </div>

    <div class="title ainimated zoomIn">
        <div class="l ainimated flash">
            <img src="../assets/img/dot_lt.png" alt="">
            <img src="../assets/img/dot_lb.png" alt="">
        </div>
        <div class="m">
            <img src="../assets/img/complete_text.png" alt="">
        </div>
        <div class="r ainimated flash">
            <img src="../assets/img/dot_rt.png" alt="">
            <img src="../assets/img/dot_rb.png" alt="">
        </div>
    </div>

    <div class="complete_button animated tada">
        <img id="success_music_btn"
            src="../assets/img/btn_shake.png" alt="" 
            @click="goShakePage">
    </div>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import preLoadImg from '../mixins/preloadImg.js'
    export default {
        name:'complete',
        mixins:[preLoadImg],
        data(){
            return{
                
            }
        },
        computed:{
            ...mapGetters(['activeDrink']),
            drinkClass(){
              return  this.activeDrink.name
            }
        },
        methods:{
            goShakePage(){
                    this.$store.dispatch('bgMusicPlayToggle',false);

                    this.$store.dispatch('switchPage','shake')

                    document.getElementById('success_music').play();
                    document.getElementById('success_music').pause();

                    document.getElementById('failed_music').play();
                    document.getElementById('failed_music').pause();
                    document.getElementById('bg_music').pause();
                    if(this.activeDrink.name=='drink3'){
                        document.getElementById('stir_music').play();
                    }else{
                        document.getElementById('shake_music').play();
                    }
            },
        },
        mounted(){
            this.preLoadImg()
            // let audio_success=document.getElementById('success_music');
            // let successBtn=document.getElementById('success_music_btn');
            
            // successBtn.addEventListener('touchstart',function(){
            //     audio_success.play();
            //     audio_success.pause();
            // }, false);
        }

    }
</script>

<style scoped lang="scss">
    .drink{
        position:relative;
        width:100%;
        height:100%;
        background-image:url('../assets/img/empty.png');
        background-repeat:no-repeat;
        background-size:100% 100% ;
        background-attachment: fixed;

        .base_title{
            width:100%;
            text-align:center;
            padding:10px 0;
            img{width:60%;}
        }

        .drinkDosing{
            $width:80%;
            position: absolute;
            top:15%;
            left:50%;
            margin-left:-$width/2;
            width:$width;
            display: flex;
            justify-content: space-around;
            li{
                list-style: none;
                animation-iteration-count: infinite;
                animation-duration:.8s;
                img{width:100%;}

            }
        }
        .container{
            $width:77%;
            $height:40%;
            position: absolute;
            top:26%;
            left:50%;
            margin-left:-40%;
            width:$width;
            height:$height;
            img{width:100%;}
            .stepImg{
                position: absolute;
                top:0;
                left:0%;
                width:100%;
            }
        }
        .title{
            $width:70%;
            position: absolute;
            bottom:13%;
            left:50%;
            margin-left:-$width/2;
            // margin-top:-20px;
            width: $width;
            height: 40px; 
            display: flex;
            animation-iteration-count: 1;
            animation-duration:2s;
            animation-delay:1s;


            .l,.r{
                display: flex;
                flex-direction: column;
                animation-iteration-count: 2;
                animation-duration:2s;
                animation-delay:2s;

            }
            img{
                width:100%;
                height:100%;
            }
            .l>img,.r>img{height:40%;}
        }
        .complete_button {
            $width:32%;
            position: absolute;
            bottom:5%;
            left:50%;
            margin-left:-$width/2;
            margin-top:-20px;
            width: $width;
            height: 40px;

            img {
                width: 100%;
                height: 100%;
            }
            animation-iteration-count: infinite;
            animation-duration:2s;
        }
    }
    //  #shake_music{display: none;}
</style>
